/*******************************
             Global-ui
*******************************/

//---- margin预设 -----
.m-auto{
    margin:auto !important;
}
// margin 5px 递增 0开始50截至
$vM5:50;
@while $vM5 > -1{
    .m-#{$vM5}{ margin:$vM5 * 1px !important; }
    $vM5:$vM5 - 5;
}
// margin 10px 递增 60开始100截至
$vM10:100;
@while $vM10 >= 60{
    .m-#{$vM10}{ margin:$vM10 * 1px !important; }
    $vM10:$vM10 - 10;
}
// margin-top 5px 递增 0开始50截至
$vMT5:50;
@while $vMT5 > -1{
    .m-t-#{$vMT5}{ margin-top:$vMT5 * 1px !important; }
    $vMT5:$vMT5 - 5;
}
// margin-top 10px 递增 60开始100截至
$vMT10:100;
@while $vMT10 >= 60{
    .m-t-#{$vMT10}{ margin-top:$vMT10 * 1px !important; }
    $vMT10:$vMT10 - 10;
}
// margin-bottom 5px 递增 0开始50截至
$vMB5:50;
@while $vMB5 > -1{
    .m-b-#{$vMB5}{ margin-bottom:$vMB5 * 1px !important; }
    $vMB5:$vMB5 - 5;
}
// margin-bottom 10px 递增 60开始100截至
$vMB10:100;
@while $vMB10 >= 60{
    .m-b-#{$vMB10}{ margin-bottom:$vMB10 * 1px !important; }
    $vMB10:$vMB10 - 10;
}
// margin-right 5px 递增 0开始50截至
$vMR5:50;
@while $vMR5 > -1{
    .m-r-#{$vMR5}{ margin-right:$vMR5 * 1px !important; }
    $vMR5:$vMR5 - 5;
}
// margin-right 10px 递增 60开始100截至
$vMR10:100;
@while $vMR10 >= 60{
    .m-r-#{$vMR10}{ margin-right:$vMR10 * 1px !important; }
    $vMR10:$vMR10 - 10;
}
// margin-left 5px 递增 0开始50截至
$vML5:50;
@while $vML5 > -1{
    .m-l-#{$vML5}{ margin-left:$vML5 * 1px !important; }
    $vML5:$vML5 - 5;
}
// margin-left 10px 递增 60开始100截至
$vML10:100;
@while $vML10 >= 60{
    .m-l-#{$vML10}{ margin-left:$vML10 * 1px !important; }
    $vML10:$vML10 - 10;
}
//---- padding预设 -----
// margin 5px 递增 0开始50截至
$vP5:50;
@while $vP5 > -1{
    .p-#{$vP5}{ padding:$vP5 * 1px !important; }
    $vP5:$vP5 - 5;
}
// padding 10px 递增 60开始100截至
$vP10:100;
@while $vP10 >= 60{
    .p-#{$vP10}{ padding:$vP10 * 1px !important; }
    $vP10:$vP10 - 10;
}
// padding-top 5px 递增 0开始50截至
$vPT5:50;
@while $vPT5 > -1{
    .p-t-#{$vPT5}{ padding-top:$vPT5 * 1px !important; }
    $vPT5:$vPT5 - 5;
}
// padding-top 10px 递增 60开始100截至
$vPT10:100;
@while $vPT10 >= 60{
    .p-t-#{$vPT10}{ padding-top:$vPT10 * 1px !important; }
    $vPT10:$vPT10 - 10;
}
// padding-bottom 5px 递增 0开始50截至
$vPB5:50;
@while $vPB5 > -1{
    .p-b-#{$vPB5}{ padding-bottom:$vPB5 * 1px !important; }
    $vPB5:$vPB5 - 5;
}
// padding-bottom 10px 递增 60开始100截至
$vPB10:100;
@while $vPB10 >= 60{
    .p-b-#{$vPB10}{ padding-bottom:$vPB10 * 1px !important; }
    $vPB10:$vPB10 - 10;
}
// padding-right 5px 递增 0开始50截至
$vPR5:50;
@while $vPR5 > -1{
    .p-r-#{$vPR5}{ padding-right:$vPR5 * 1px !important; }
    $vPR5:$vPR5 - 5;
}
// padding-right 10px 递增 60开始100截至
$vPR10:100;
@while $vPR10 >= 60{
    .p-r-#{$vPR10}{ padding-right:$vPR10 * 1px !important; }
    $vPR10:$vPR10 - 10;
}
// padding-left 5px 递增 0开始50截至
$vPL5:50;
@while $vPL5 > -1{
    .p-l-#{$vPL5}{ padding-left:$vPL5 * 1px !important; }
    $vPL5:$vPL5 - 5;
}
// padding-left 10px 递增 60开始100截至
$vPL10:100;
@while $vPL10 >= 60{
    .p-l-#{$vPL10}{ padding-left:$vPL10 * 1px !important; }
    $vPL10:$vPL10 - 10;
}
//边框样式
.br-full{
    border-radius:100% !important;
}
.no-br{
    border:none !important;
    box-shadow:none !important;
}
//高宽设定
.w-auto{
    width:auto !important;
}
.w-10p{
    width:10% !important;
}
.w-15p{
  width:15% !important;
}
.w-20p{
    width:20% !important;
}
.w-25p{
    width:25% !important;
}
.w-30p{
    width:30% !important;
}
.w-35p{
  width:35% !important;
}
.w-40p{
    width:40% !important;
}
.w-50p{
    width:50% !important;
}
.w-70p{
    width:70% !important;
}
.w-100p{
    width:100% !important;
}
.h-auto{
    height:auto !important;
}
.h-25p{
    height:25% !important;
}
.h-50p{
    height:50% !important;
}
.h-100p{
    height:100% !important;
}
.vh-100{
    height:100vh;
}
//布局
.of-h{
    overflow:hidden !important;
}
.of-a{
    overflow:auto !important;
}
.pos-r{
    position:relative !important;
}
.pos-a{
    position:absolute !important;
}
.dis-i{
    display:inline !important;
}
.dis-i-b{
    display:inline-block !important;
}
.dis-b{
    display:block !important;
}
.dis-n{
    display:none !important;
}
.fl-l{
    float:left !important;
}
.fl-r{
    float:right !important;
}
.fl-n{
    float:inherit !important;
}
//清除容器内外边距
.no-padding{
    padding:0 !important;
}
.no-margin{
    margin:0 !important;
}


// 字体
@for $i from 10 through 30{
    .f-#{$i}{
        font-size:$i * 1px !important;
    }
}
.t-l{
    text-align:left !important;
}
.t-c{
    text-align:center !important;
}
.t-r{
    text-align:right !important;
}

// 字体粗细
.t-bold{
  font-weight: bold;
}
.t-bolder{
  font-weight: bolder;
}
.t-lighter{
  font-weight: lighter;
}
.pointer{
  cursor: pointer;
}

//字体颜色
.t-sub{color:rgba($content-txt, .4) !important}
.t-info{color:$content-info !important}
.t-danger{color:$content-danger !important}
.t-success{color:$content-success !important}
.t-primary{color:$content-primary !important}
.t-warning{color:$content-warning !important}
.t-underline{text-decoration:underline;}
.t-red{color:#db2828 !important;}
.t-orange{color:#f26202 !important;}
.t-yellow{color:#fbbd08 !important;}
.t-olive{color:#b5cc18 !important;}
.t-green{color:#21ba45 !important;}
.t-teal{color:#00b5ad !important;}
.t-blue{color:#2185d0 !important;}
.t-violet{color:#6435c9 !important;}
.t-purple{color:#a333c8 !important;}
.t-pink{color:#e61a8d !important;}
.t-brown{color:#a5673f !important;}
.t-grey{color:#767676 !important;}
.t-black{color:#27292a !important;}

// 响应式横向居中,如果屏幕尺寸不够时直接100%宽
.auto-center{
    display: block;
    width: 100%;
    @media screen and (min-width: 1660px) {// 屏幕尺寸大于这个数
        width: 70%;
        margin: 0 auto;
    }
}

//转圈圈的图标
.loading-icon{
    animation:rotating 2s linear infinite;
}
